<template>
  <div>
    <p style="display: flex">
      <el-button type="info" icon="el-icon-refresh" size="mini"
                 @click="list()">刷新
      </el-button>
    </p>
    <p style="display: flex">
      <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pageInfo.size"
          :current-page="pageInfo.page"
          @current-change="list"
          :total="pageInfo.total">
      </el-pagination>
      <el-select v-model="pageInfo.size" placeholder="请选择"
                 @change="list(1)">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"

            :value="item.value">
        </el-option>
      </el-select>
    </p>
    <div>
      <el-table
          :data="pageInfo.list"
          style="width: 100%">
        <el-table-column
            prop="id"
            label="id"
            width="180">
        </el-table-column>
        <el-table-column
            prop="path"
            label="相对路径"
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="文件名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="suffix"
            label="后缀"
            width="180">
        </el-table-column>
        <el-table-column
            label="大小"
            width="180">
          <template slot-scope="scope">
            {{scope.row.size | formatFileSize}}
          </template>
        </el-table-column>
        <el-table-column
            label="用途"
            width="180">
          <template slot-scope="scope">
            {{ FILE_USE | optionKV(scope.row.purpose) }}
          </template>
        </el-table-column>

        <el-table-column
            prop="createdAt"
            label="创建时间"
            width="180">
        </el-table-column>
        <el-table-column
            prop="updatedAt"
            label="修改时间"
            width="180">
        </el-table-column>

        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template slot-scope="scope">
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
import {list, deleteFile, saveFile} from "@/network/file";
import {Confirm} from '@/assets/js/confirm'
import {Validator} from "@/assets/js/validator";

export default {
  name: "file",
  mounted() {
    this.list(1)
  },
  data() {
    return {
      FILE_USE: FILE_USE,
      pageInfo: {
        page: 1,
        size: 1,
        list: [],
        total: 0,
      }, options: [
        {
          value: 1,
          label: 1
        },
        {
          value: 5,
          label: 5
        },
        {
          value: 10,
          label: 10
        },
        {
          value: 50,
          label: 50
        },],
      dialogVisible: false,
      form: {},
      formLabelWidth: '120px'
    }
  },
  methods: {
    list(page) {
      let _this = this;
      if (page !== null && page !== undefined) {
        _this.pageInfo.page=page
      }
      _this.pageInfo.list=[]
      list(_this.pageInfo).then(res => {
        _this.pageInfo = res.data
      })
    },
  }
}
</script>

<style scoped>

</style>
